<template>
  <div class="gameList">
    <!-- 搜索 -->
    <div class="section">
      <h3>订单数据</h3>
      <search-item @searchList="searchData"></search-item>
    </div>
    <!-- 表格 -->
    <el-table
      :height="tabHeight"
      border
      style="width: 99%"
      align="center"
      :data="tableData"
      v-loading="loading"
      :row-style="rowClass"
    >
      <el-table-column prop="orderId" label="订单号"></el-table-column>
      <el-table-column prop="cpOrderId" label="cp订单号"></el-table-column>
      <el-table-column prop="name" label="游戏名" width="162"></el-table-column>
      <el-table-column prop="classify" label="系统" width="100"></el-table-column>
      <el-table-column prop="accountId" label="小号ID" width="100"></el-table-column>
      <el-table-column prop="amount" label="消费金额" width="100"></el-table-column>
      <el-table-column prop="couponRealAmount" label="优惠券充值" width="100"></el-table-column>
      <el-table-column prop="couponAmount" label="券面值" width="100"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
    </el-table>
    <div class="bottom">
      <!-- 将分页器作为子组件引入 -->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="pagenationData.currentPage"
        :page-size="pagenationData.pageSize"
        :total="pagenationData.pageTotal"
        background
        layout="prev, pager, next"
        prev-text="上一页"
        next-text="下一页"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import SearchItem from "./component/searchItem";
import { getCouponList } from "@/api/dataCenter";

import Clipboard from "clipboard";

export default {
  inject: ["reload"],
  data() {
    return {
      tabHeight: window.innerHeight - 200,
      tableData: [],
      search: {},
      loading: true,
      pageData: {
        page: 1,
        limit: 20,
        time:[new Date().toLocaleDateString(), new Date().toLocaleDateString()]
      },
      pagenationData: {
        pageTotal: 0,
        currentPage: 1,
        pageSize: 20
      }
    };
  },
  components: {
    SearchItem
  },
  mounted() {
    this.getCouponList();
  },
  methods: {
    searchData(search) {
      this.search = search;
      this.search.page = 1;
      this.pagenationData.currentPage = 1;
      this.searchList();
    },
    // 搜索数据
    searchList() {
      this.loading = true;
      const para = Object.assign({},this.search);  
      getCouponList(para)
        .then(res => {
          var obj = {
            orderId: "汇总",
            name: "",
            classify: "",
            accountId: "",
            amount: res.data.amountSum,
            couponRealAmount:  res.data.couponRealAmountSum+'（含官方券：'+res.data.officialCouponAmountSum+'）',
            couponAmount: res.data.couponAmountSum,
            cpOrderId: "",
            createTime: ""
          };
          this.loading = false;
          this.pagenationData.pageTotal = res.data.count;
          this.tableData = res.data.list;
          this.tableData.unshift(obj);
        })
        .catch(error => {});
    },
    // 获取数据列表
    getCouponList() {
      const para = Object.assign({}, this.pageData);
      getCouponList(para)
        .then(res => {
          var obj = {
            orderId: "汇总",
            name: "",
            classify: "",
            accountId: "",
            amount: res.data.amountSum,
            couponRealAmount: res.data.couponRealAmountSum+'（含官方券：'+res.data.officialCouponAmountSum+'）',
            couponAmount: res.data.couponAmountSum,
            cpOrderId: "",
            createTime: ""
          };
          this.loading = false;
          this.pagenationData.pageTotal = res.data.count;
          this.tableData = res.data.list;
          this.tableData.unshift(obj);
        })
        .catch(error => {});
    },
    // 翻页
    handleCurrentChange(val) {
      if(!this.search.time){
        this.search.time=this.pageData.time
      }
      this.pageData.page = val;
      this.search.page = val;
      this.searchList();
    },
    rowClass(row, index) {
      if (row.rowIndex == 0) {
        return { color: "#f00" };
      }
    }
  }
};
</script>